<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogdetail.css">
    <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <!-- 先引入 jquery, 再引入 editor.md, 顺序不能反 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
      <!--这是一个导航栏-->
      <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!--这个标签仅仅用于占位，把我们的a标签挤到右面去-->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

     <!--页面主体部分-->
     <div class="container">

        <!--左侧信息-->
        <div class="container-left">
            <div class="card">
                <img src="image/BLOG-头像.png" alt="">
                <h2></h2>
                <a href="#">github</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
    
    
        <!--右侧信息-->
        <div class="container-right">
            <h3 class="title"></h3>
            <div class="date"></div>
            <div class="content" id="content">
            </div>
        </div>

     </div>
     <script src="js/app.js"></script>
     <script>
        function getBlog(){
            $.ajax({
                type:'get',
                url:'blog'+location.search, //这里需要带上blogId 参数
                success: function(blog){
                    //body就是返回的一篇博客的内容
                    //形如{blogId:1,title：“这是标题”，...}
                    let h3 = document.querySelector('.container-right h3');
                    h3.innerHTML = blog.title;
                    let dateDiv = document.querySelector('.container-right .date');
                    dateDiv.innerHTML = blog.postTime;
                    //这种设置方式，页面显示的是md的原始内容，希望对这个内容进行渲染成html
                    // let contentDiv = document.querySelector('.container-right .content');
                    // contentDiv.innerHTML = blog.content;

                    //这个方法第一个参数，必须是一个html标签的id属性
                    editormd.markdownToHTML('content',{markdown:blog.content});
                }
            })

        }

        getBlog();

        //判定当前用户是否是未登录的状态
        getLoginStatus();

        function getAuthorInfo(){
            $.ajax({
                type: 'get',
                url: 'getAuthorInfo' + location.search,
                success: function(user){
                    //将拿到的 user对象取出其中的username，设置到页面上
                    let h2 = document.querySelector('.card h2');
                    h2.innerHTML = user.username;
                }



            });
        }

        getAuthorInfo();

     </script>
</body>
</html>